<template>
	<view class='details'>
		<!--商品图-->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image class='swiper-img' :src="goodsContent.imgUrl" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!--价格和名称-->
		<view class='details-goods'>
			<view class='goods-pprice'>¥{{goodsContent.pprice}}</view>
			<view class='goods-oprice'>¥{{goodsContent.oprice}}</view>
			<view class='goods-name'>{{goodsContent.name}}</view>
		</view>
		<!--商品详情图-->
		<view>
			<view>
				<image class='details-img' src="http://yun88.top:4001/images/detail1.jpg" mode=""></image>
			</view>
			<view>
				<image class='details-img' src="http://yun88.top:4001/images/detail2.jpg" mode=""></image>
			</view>
			<view>
				<image class='details-img' src="http://yun88.top:4001/images/detail3.jpg" mode=""></image>
			</view>
			<view>
				<image class='details-img' src="http://yun88.top:4001/images/detail4.jpg" mode=""></image>
			</view>
			<view>
				<image class='details-img' src="http://yun88.top:4001/images/detail5.jpg" mode=""></image>
			</view>
		</view>

		<Card cardTitle='看了又看'></Card>
		<!-- 商品列表 -->
		<CommodityList :dataList='dataList'></CommodityList>
		<!-- 底部 -->
		<view class="details-foot">
			<view class="iconfont icon-xiaoxi"></view>
			<view class="iconfont icon-gouwuche" @tap="goShopCart"></view>
			<view class="add-shopcart" @tap="showPop">加入购物车</view>
			<view class="purchase" @tap="showPop">立即购买</view>
		</view>
		<!-- 底部弹出层 -->
		<view class="pop" v-show="isShow" @touchmove.stop.prevent=''>
			<!-- 蒙层 -->
			<view class="pop-mask" @tap="hidePop"></view>
			<!-- 内容 -->
			<view class="pop-box" :animation="animationData">
				<view class="">
					<image class="pop-img" :src="goodsContent.imgUrl" mode=""></image>
				</view>
				<view class="pop-num">
					<view class="">购买数量</view>
					<uni-number-box :value="num" :min="1" @change="changeNumber"></uni-number-box>
				</view>
				<view class="pop-sub" @tap="addCart">
					确定
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Card from '@/components/Card/Card.vue'
	import CommodityList from '@/components/CommodityList/CommodityList.vue'
	import $http from "@/common/api/request.js"
	export default {
		data() {
			return {
				goodsContent:{},
				num:1,
				swiperList: [{
						imgUrl: "http://yun88.top:4001/images/details1.jpeg"
					},
					{
						imgUrl: "http://yun88.top:4001/images/details2.jpeg"
					},
					{
						imgUrl: "http://yun88.top:4001/images/details3.jpeg"
					}
				],
				dataList: [{
						id: 1,
						imgUrl: "http://yun88.top:4001/images/commodity1.jpg",
						name: "大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
						pprice: "299",
						oprice: "659",
						discount: "5.2"
					},
					{
						id: 2,
						imgUrl: "http://yun88.top:4001/images/commodity2.jpg",
						name: "大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
						pprice: "299",
						oprice: "659",
						discount: "5.2"
					},
					{
						id: 3,
						imgUrl: "http://yun88.top:4001/images/commodity3.jpg",
						name: "大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
						pprice: "299",
						oprice: "659",
						discount: "5.2"
					},
					{
						id: 4,
						imgUrl: "http://yun88.top:4001/images/commodity4.jpg",
						name: "大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008大姨绒毛大款2020年必须买,不买你就不行了,爆款疯狂GG008",
						pprice: "299",
						oprice: "659",
						discount: "5.2"
					}
				],
				isShow: false,
				animationData: {}
			}
		},
		onBackPress(){
			if(this.isShow){
				return true
			}
		},
		onLoad(val) {
			$http.request({
				url: "/goods/id",
				data:{
					id:val.id
				}
			}).then(res => {
				let data = res.data
				this.goodsContent = data[0]
			}).catch(err => {
				console.log(err);
				uni.showToast({
					title: "请求失败",
					icon: "none"
				})
			})
		},
		//点击分享
		onNavigationBarButtonTap(e){
			//分享
			// #ifdef APP-PLUS
			if(e.type == "share"){
				uni.share({
					"provider":"weixin",
					"type":0.,
					"title":this.goodsContent.name,
					"scene":"WXSceneSession",
					"href":"http://192.168.0.118:3000/#/pages/details/details?id="+this.goodsContent.id,
					"imageUrl":this.goodsContent.imgUrl,
					success() {
						// uni.showTabBar({
						// 	title:"分享成功"
						// })
					},
					fail(err) {
						console.log(err);
					}
				})
			}
			// #endif
		},
		methods: {
			//显示底部弹出层
			showPop() {
				this.isShow = true
				var animation = uni.createAnimation({
					duration: 300
				})
				this.animation = animation
				animation.translateY(0).step()
				this.animationData = animation.export()
			},
			//隐藏底部弹出层
			hidePop() {
				var animation = uni.createAnimation({
					duration: 300
				})
				this.animation = animation
				animation.translateY(400).step()
				this.animationData = animation.export()
				setTimeout(()=>{
					this.isShow = false
				},300)
			},
			//改变商品数量
			changeNumber(value){
				this.num = value
			},
			//跳转购物车页面
			goShopCart(){
				//如果当前没有token
				if(!this.$store.state.user.token){
					uni.showToast({
						title:"请先登录",
						icon:"none"
					})
					return uni.navigateTo({
						url:"/pages/login/login"
					})
				}
				uni.reLaunch({
					url:"/pages/shopcart/shopcart"
				})
			},
			//加入购物车
			addCart(){
				//如果当前没有token
				if(!this.$store.state.user.token){
					uni.showToast({
						title:"请先登录",
						icon:"none"
					})
					return uni.navigateTo({
						url:"/pages/login/login"
					})
				}
				//
				let goods = this.goodsContent
				goods['checked'] = false
				goods['num'] = this.num
				goods['price'] = 0
				//加入购物车
				this.$store.commit("addShopCart",goods)
				//隐藏底部弹窗
				this.hidePop()
				//提示信息
				uni.showToast({
					title:'加入购物车成功',
					icon:"none"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.details {
		padding-bottom: 100rpx;

		swiper {
			width: 100%;
			height: 700rpx;

			.swiper-img {
				width: 100%;
				height: 700rpx;
			}
		}

		.details-goods {
			text-align: center;
			font-weight: bold;
			font-size: 36rpx;
			padding: 10rpx 0;
		}

		.details-img {
			width: 100%;
		}

		.details-foot {
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100rpx;
			background-color: #fff;

			.iconfont {
				width: 70rpx;
				height: 70rpx;
				background-color: #000;
				color: #fff;
				border-radius: 50%;
				text-align: center;
				margin: 0 10rpx;
				line-height: 70rpx;
			}

			.add-shopcart,
			.purchase {
				margin: 0 40rpx;
				padding: 14rpx 30rpx;
				background-color: #000;
				color: #fff;
				border-radius: 40rpx;
			}

			.purchase {
				background-color: #49BDFB;
			}
		}

		.pop {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 999;

			.pop-mask {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, .3);
			}

			.pop-box {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;	
				background-color: #fff;
				transform: translateY(400px);
				.pop-img{
					width: 260rpx;
					height: 260rpx;
				}
				.pop-sub{
					line-height: 80rpx;
					background-color: #49BDFB;
					color: #fff;
					text-align: center;
				}
				.pop-num{
					display: flex;
					justify-content: space-between;
					padding: 20rpx;
				}
			}
		}
	}
</style>
